<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>陈明亮的个人主页 - 安全社交</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #4f46e5;
            --primary-light: #f0f9ff;
            --secondary: #64748b;
            --light: #f8fafc;
            --dark: #1e293b;
            --success: #10b981;
            --danger: #ef4444;
            --warning: #f59e0b;
            --border: #e2e8f0;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            --shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f5f7ff;
            color: var(--dark);
            line-height: 1.6;
        }
        
        .navbar {
            box-shadow: var(--shadow);
            background-color: white;
        }
        
        .container {
            padding: 2rem 0;
        }
        
        /* 头部封面图 */
        .profile-header {
            position: relative;
            height: 300px;
            background-color: #e2e8f0;
            border-radius: 1rem;
            overflow: hidden;
            margin-bottom: -70px;
            z-index: 1;
        }
        
        .cover-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 个人资料卡片 */
        .profile-card {
            background-color: white;
            border-radius: 1rem;
            box-shadow: var(--shadow);
            padding: 2rem;
            margin-bottom: 2rem;
            position: relative;
            z-index: 2;
        }
        
        .profile-avatar-container {
            display: flex;
            justify-content: center;
        }
        
        .profile-avatar {
            width: 140px;
            height: 140px;
            border-radius: 50%;
            object-fit: cover;
            border: 5px solid white;
            box-shadow: var(--shadow);
            margin-top: -70px;
        }
        
        .profile-info {
            text-align: center;
            margin-bottom: 1.5rem;
        }
        
        .profile-name {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        
        .profile-meta {
            color: var(--secondary);
            margin-bottom: 1rem;
        }
        
        .verification-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            background-color: var(--primary-light);
            color: var(--primary);
            padding: 0.25rem 0.75rem;
            border-radius: 999px;
            font-size: 0.85rem;
            font-weight: 500;
            margin-bottom: 1rem;
        }
        
        .profile-actions {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin-bottom: 1.5rem;
        }
        
        .btn {
            padding: 0.6rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 500;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .btn-primary {
            background-color: var(--primary);
            border-color: var(--primary);
        }
        
        .btn-primary:hover {
            background-color: #4338ca;
            border-color: #4338ca;
        }
        
        .btn-outline-primary {
            color: var(--primary);
            border-color: var(--primary);
        }
        
        .btn-outline-primary:hover {
            background-color: var(--primary);
            color: white;
        }
        
        .btn-danger {
            background-color: var(--danger);
            border-color: var(--danger);
        }
        
        .btn-danger:hover {
            background-color: #dc2626;
            border-color: #dc2626;
        }
        
        /* 内容区域 */
        .content-container {
            display: flex;
            gap: 2rem;
        }
        
        .main-content {
            flex: 3;
        }
        
        .sidebar {
            flex: 1;
        }
        
        .card {
            background-color: white;
            border-radius: 1rem;
            box-shadow: var(--shadow);
            padding: 1.5rem;
            margin-bottom: 2rem;
            border: none;
        }
        
        .card-title {
            font-weight: 600;
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        /* 个人详情 */
        .detail-item {
            display: flex;
            margin-bottom: 1rem;
        }
        
        .detail-label {
            flex: 1;
            color: var(--secondary);
            font-weight: 500;
        }
        
        .detail-value {
            flex: 2;
        }
        
        .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }
        
        .tag {
            padding: 0.35rem 1rem;
            border-radius: 999px;
            font-size: 0.85rem;
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        /* 照片展示 */
        .photos-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.75rem;
            margin-bottom: 1rem;
        }
        
        .photo-item {
            height: 120px;
            border-radius: 0.5rem;
            overflow: hidden;
            cursor: pointer;
            position: relative;
        }
        
        .photo-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .photo-item:hover img {
            transform: scale(1.1);
        }
        
        .photo-more {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }
        
        /* 动态与留言 */
        .nav-tabs {
            border-bottom: 1px solid var(--border);
            margin-bottom: 1.5rem;
        }
        
        .nav-tabs .nav-link {
            color: var(--secondary);
            border: none;
            padding: 0.75rem 1.5rem;
            font-weight: 500;
            border-bottom: 3px solid transparent;
        }
        
        .nav-tabs .nav-link.active {
            color: var(--primary);
            border-bottom: 3px solid var(--primary);
            background-color: transparent;
        }
        
        /* 留言区域 */
        .comment-form {
            margin-bottom: 2rem;
        }
        
        .form-control {
            border-radius: 0.75rem;
            border-color: var(--border);
            padding: 1rem;
            margin-bottom: 1rem;
        }
        
        .form-actions {
            display: flex;
            justify-content: flex-end;
        }
        
        .comment-item {
            padding: 1.5rem;
            border-radius: 0.75rem;
            background-color: var(--light);
            margin-bottom: 1.5rem;
        }
        
        .comment-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1rem;
        }
        
        .comment-author {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .author-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-name {
            font-weight: 600;
        }
        
        .comment-time {
            font-size: 0.85rem;
            color: var(--secondary);
        }
        
        .comment-content {
            margin-bottom: 1rem;
        }
        
        .comment-actions {
            display: flex;
            gap: 1.5rem;
        }
        
        .comment-action {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            color: var(--secondary);
            font-size: 0.85rem;
            cursor: pointer;
            transition: color 0.2s;
        }
        
        .comment-action:hover {
            color: var(--primary);
        }
        
        .comment-action.liked {
            color: var(--danger);
        }
        
        /* 回复区域 */
        .replies {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border);
            margin-left: 2rem;
        }
        
        .reply-item {
            display: flex;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }
        
        .reply-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .reply-content {
            flex: 1;
            background-color: white;
            padding: 0.75rem;
            border-radius: 0.5rem;
        }
        
        .reply-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.25rem;
        }
        
        .reply-author {
            font-weight: 600;
            font-size: 0.9rem;
        }
        
        .reply-time {
            font-size: 0.75rem;
            color: var(--secondary);
        }
        
        .reply-text {
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }
        
        .reply-actions {
            display: flex;
            gap: 1rem;
            font-size: 0.75rem;
        }
        
        .reply-form {
            margin-top: 1rem;
            display: flex;
            gap: 0.75rem;
        }
        
        .reply-form .form-control {
            flex: 1;
            padding: 0.75rem;
            margin-bottom: 0;
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .content-container {
                flex-direction: column;
            }
            
            .photos-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 576px) {
            .profile-header {
                height: 200px;
            }
            
            .profile-avatar {
                width: 100px;
                height: 100px;
            }
            
            .profile-actions {
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .photos-grid {
                grid-template-columns: 1fr;
            }
            
            .nav-tabs .nav-link {
                padding: 0.5rem 0.75rem;
                font-size: 0.9rem;
            }
            
            .replies {
                margin-left: 0;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="fas fa-shield-alt text-primary me-2"></i>安全社交
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">担保交友</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">活动推荐</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">安全指南</a>
                    </li>
                </ul>
                <div class="d-flex align-items-center gap-3">
                    <button class="btn btn-outline-primary">登录</button>
                    <button class="btn btn-primary">注册</button>
                </div>
            </div>
        </div>
    </nav>
    
    <!-- 主要内容区 -->
    <div class="container">
        <!-- 封面图 -->
        <div class="profile-header">
            <img src="https://picsum.photos/1200/400?random=10" alt="陈明亮的封面照片" class="cover-image">
        </div>
        
        <!-- 个人资料卡片 -->
        <div class="profile-card">
            <div class="profile-avatar-container">
                <img src="https://picsum.photos/200/200?random=101" alt="陈明亮的头像" class="profile-avatar">
            </div>
            
            <div class="profile-info">
                <h1 class="profile-name">陈明亮</h1>
                <div class="profile-meta">28岁 · 上海 · 设计师</div>
                <div class="verification-badge">
                    <i class="fas fa-check-circle"></i> 已通过实名认证和背景审核
                </div>
                <p>热爱生活，喜欢摄影和旅行，希望能认识志同道合的朋友一起探索世界的美好。</p>
            </div>
            
            <div class="profile-actions">
                <button class="btn btn-primary">
                    <i class="fas fa-comment"></i> 发送消息
                </button>
                <button class="btn btn-outline-primary">
                    <i class="fas fa-user-plus"></i> 加为好友
                </button>
                <button class="btn btn-outline-primary" id="likeBtn">
                    <i class="fas fa-heart"></i> 关注 (256)
                </button>
                <button class="btn btn-outline-primary">
                    <i class="fas fa-share-alt"></i> 分享
                </button>
            </div>
            
            <div class="row text-center">
                <div class="col-4">
                    <div class="fs-5 font-weight-bold">128</div>
                    <div class="text-secondary text-sm">动态</div>
                </div>
                <div class="col-4">
                    <div class="fs-5 font-weight-bold">2.5k</div>
                    <div class="text-secondary text-sm">粉丝</div>
                </div>
                <div class="col-4">
                    <div class="fs-5 font-weight-bold">368</div>
                    <div class="text-secondary text-sm">关注</div>
                </div>
            </div>
        </div>
        
        <!-- 内容区域 -->
        <div class="content-container">
            <!-- 主内容区 -->
            <div class="main-content">
                <!-- 个人动态与留言标签页 -->
                <ul class="nav nav-tabs" id="profileTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="posts-tab" data-bs-toggle="tab" data-bs-target="#posts" type="button" role="tab">
                            <i class="fas fa-user-circle me-1"></i> 个人动态
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="comments-tab" data-bs-toggle="tab" data-bs-target="#comments" type="button" role="tab">
                            <i class="fas fa-comments me-1"></i> 留言板 (32)
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="friends-tab" data-bs-toggle="tab" data-bs-target="#friends" type="button" role="tab">
                            <i class="fas fa-users me-1"></i> 好友列表
                        </button>
                    </li>
                </ul>
                
                <div class="tab-content" id="profileTabsContent">
                    <!-- 个人动态 -->
                    <div class="tab-pane fade show active" id="posts" role="tabpanel">
                        <div class="card">
                            <h5 class="card-title">
                                <i class="fas fa-image text-primary"></i> 最新动态
                            </h5>
                            
                            <!-- 动态内容 -->
                            <div class="post-item mb-4 pb-4 border-bottom">
                                <div class="user-info d-flex align-items-center gap-2 mb-3">
                                    <img src="https://picsum.photos/100/100?random=101" alt="陈明亮的头像" class="author-avatar">
                                    <div>
                                        <div class="author-name">陈明亮</div>
                                        <div class="comment-time">今天 14:30</div>
                                    </div>
                                </div>
                                
                                <p class="mb-3">周末去了郊外拍摄的日落，大自然的色彩总是让人惊叹。有没有同样喜欢摄影的朋友，下次可以一起约拍~</p>
                                
                                <div class="photos-grid mb-3">
                                    <div class="photo-item">
                                        <img src="https://picsum.photos/400/300?random=21" alt="日落照片1">
                                    </div>
                                    <div class="photo-item">
                                        <img src="https://picsum.photos/400/300?random=22" alt="日落照片2">
                                    </div>
                                    <div class="photo-item">
                                        <img src="https://picsum.photos/400/300?random=23" alt="日落照片3">
                                    </div>
                                </div>
                                
                                <div class="comment-actions">
                                    <div class="comment-action">
                                        <i class="fas fa-heart"></i> 128
                                    </div>
                                    <div class="comment-action">
                                        <i class="fas fa-comment"></i> 32
                                    </div>
                                    <div class="comment-action">
                                        <i class="fas fa-share-alt"></i> 分享
                                    </div>
                                </div>
                            </div>
                            
                            <div class="post-item">
                                <div class="user-info d-flex align-items-center gap-2 mb-3">
                                    <img src="https://picsum.photos/100/100?random=101" alt="陈明亮的头像" class="author-avatar">
                                    <div>
                                        <div class="author-name">陈明亮</div>
                                        <div class="comment-time">3天前</div>
                                    </div>
                                </div>
                                
                                <p class="mb-3">新入手的相机，迫不及待地测试了一下性能。这是在工作室拍的几张样片，感觉色彩表现很出色。</p>
                                
                                <div class="photos-grid mb-3">
                                    <div class="photo-item">
                                        <img src="https://picsum.photos/400/300?random=24" alt="样片1">
                                    </div>
                                    <div class="photo-item">
                                        <img src="https://picsum.photos/400/300?random=25" alt="样片2">
                                    </div>
                                    <div class="photo-item">
                                        <img src="https://picsum.photos/400/300?random=26" alt="样片3">
                                    </div>
                                </div>
                                
                                <div class="comment-actions">
                                    <div class="comment-action">
                                        <i class="fas fa-heart"></i> 96
                                    </div>
                                    <div class="comment-action">
                                        <i class="fas fa-comment"></i> 24
                                    </div>
                                    <div class="comment-action">
                                        <i class="fas fa-share-alt"></i> 分享
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 留言板 -->
                    <div class="tab-pane fade" id="comments" role="tabpanel">
                        <!-- 留言表单 -->
                        <div class="card comment-form">
                            <h5 class="card-title">
                                <i class="fas fa-pen text-primary"></i> 留言
                            </h5>
                            <textarea class="form-control" rows="3" placeholder="写下你的留言..."></textarea>
                            <div class="form-actions">
                                <button class="btn btn-primary">
                                    <i class="fas fa-paper-plane"></i> 发送留言
                                </button>
                            </div>
                        </div>
                        
                        <!-- 留言列表 -->
                        <div class="comment-list">
                            <!-- 留言1 -->
                            <div class="comment-item">
                                <div class="comment-header">
                                    <div class="comment-author">
                                        <img src="https://picsum.photos/100/100?random=102" alt="林小雨的头像" class="author-avatar">
                                        <div>
                                            <div class="author-name">林小雨</div>
                                            <div class="comment-time">昨天 18:45</div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="comment-content">
                                    看到你拍的照片真不错！我也很喜欢摄影，不过还是新手，有机会想向你请教一些技巧~
                                </div>
                                
                                <div class="comment-actions">
                                    <div class="comment-action" id="likeComment1">
                                        <i class="fas fa-heart"></i> 12
                                    </div>
                                    <div class="comment-action replyBtn">
                                        <i class="fas fa-reply"></i> 回复
                                    </div>
                                </div>
                                
                                <!-- 回复区域 -->
                                <div class="replies">
                                    <!-- 回复表单 -->
                                    <div class="reply-form d-none" id="replyForm1">
                                        <img src="https://picsum.photos/100/100?random=100" alt="当前用户头像" class="reply-avatar">
                                        <input type="text" class="form-control" placeholder="回复 @林小雨...">
                                        <button class="btn btn-primary btn-sm">发送</button>
                                    </div>
                                    
                                    <!-- 回复1 -->
                                    <div class="reply-item">
                                        <img src="https://picsum.photos/100/100?random=101" alt="陈明亮的头像" class="reply-avatar">
                                        <div class="reply-content">
                                            <div class="reply-header">
                                                <div class="reply-author">陈明亮</div>
                                                <div class="reply-time">昨天 19:20</div>
                                            </div>
                                            <div class="reply-text">谢谢喜欢！没问题啊，有什么疑问可以随时问我，大家互相学习~</div>
                                            <div class="reply-actions">
                                                <div class="comment-action">
                                                    <i class="fas fa-heart"></i> 5
                                                </div>
                                                <div class="comment-action replyBtn">
                                                    <i class="fas fa-reply"></i> 回复
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 留言2 -->
                            <div class="comment-item">
                                <div class="comment-header">
                                    <div class="comment-author">
                                        <img src="https://picsum.photos/100/100?random=103" alt="王大山的头像" class="author-avatar">
                                        <div>
                                            <div class="author-name">王大山</div>
                                            <div class="comment-time">3天前</div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="comment-content">
                                    下周末我们有个户外露营活动，会有很多摄影的好机会，你有兴趣参加吗？可以认识很多摄影爱好者。
                                </div>
                                
                                <div class="comment-actions">
                                    <div class="comment-action" id="likeComment2">
                                        <i class="fas fa-heart"></i> 8
                                    </div>
                                    <div class="comment-action replyBtn">
                                        <i class="fas fa-reply"></i> 回复
                                    </div>
                                </div>
                                
                                <!-- 回复区域 -->
                                <div class="replies">
                                    <!-- 回复表单 -->
                                    <div class="reply-form d-none" id="replyForm2">
                                        <img src="https://picsum.photos/100/100?random=100" alt="当前用户头像" class="reply-avatar">
                                        <input type="text" class="form-control" placeholder="回复 @王大山...">
                                        <button class="btn btn-primary btn-sm">发送</button>
                                    </div>
                                    
                                    <!-- 回复1 -->
                                    <div class="reply-item">
                                        <img src="https://picsum.photos/100/100?random=101" alt="陈明亮的头像" class="reply-avatar">
                                        <div class="reply-content">
                                            <div class="reply-header">
                                                <div class="reply-author">陈明亮</div>
                                                <div class="reply-time">3天前</div>
                                            </div>
                                            <div class="reply-text">听起来不错！具体是哪天？在哪里集合呢？</div>
                                            <div class="reply-actions">
                                                <div class="comment-action">
                                                    <i class="fas fa-heart"></i> 2
                                                </div>
                                                <div class="comment-action replyBtn">
                                                    <i class="fas fa-reply"></i> 回复
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 回复2 -->
                                    <div class="reply-item">
                                        <img src="https://picsum.photos/100/100?random=103" alt="王大山的头像" class="reply-avatar">
                                        <div class="reply-content">
                                            <div class="reply-header">
                                                <div class="reply-author">王大山</div>
                                                <div class="reply-time">2天前</div>
                                            </div>
                                            <div class="reply-text">周六早上8点在人民广场集合，大概两天一夜，有兴趣的话我把你拉进活动群~</div>
                                            <div class="reply-actions">
                                                <div class="comment-action">
                                                    <i class="fas fa-heart"></i> 1
                                                </div>
                                                <div class="comment-action replyBtn">
                                                    <i class="fas fa-reply"></i> 回复
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 留言3 -->
                            <div class="comment-item">
                                <div class="comment-header">
                                    <div class="comment-author">
                                        <img src="https://picsum.photos/100/100?random=104" alt="张悦的头像" class="author-avatar">
                                        <div>
                                            <div class="author-name">张悦</div>
                                            <div class="comment-time">1周前</div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="comment-content">
                                    我最近有个小型音乐会，想请人帮忙拍摄一些现场照片，不知道你有没有时间？可以付一定的报酬~
                                </div>
                                
                                <div class="comment-actions">
                                    <div class="comment-action" id="likeComment3">
                                        <i class="fas fa-heart"></i> 5
                                    </div>
                                    <div class="comment-action replyBtn">
                                        <i class="fas fa-reply"></i> 回复
                                    </div>
                                </div>
                                
                                <!-- 回复区域 -->
                                <div class="replies">
                                    <!-- 回复表单 -->
                                    <div class="reply-form d-none" id="replyForm3">
                                        <img src="https://picsum.photos/100/100?random=100" alt="当前用户头像" class="reply-avatar">
                                        <input type="text" class="form-control" placeholder="回复 @张悦...">
                                        <button class="btn btn-primary btn-sm">发送</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 加载更多留言 -->
                        <div class="text-center mt-4">
                            <button class="btn btn-outline-primary">
                                <i class="fas fa-history me-2"></i> 查看更多留言
                            </button>
                        </div>
                    </div>
                    
                    <!-- 好友列表 -->
                    <div class="tab-pane fade" id="friends" role="tabpanel">
                        <div class="card">
                            <h5 class="card-title">
                                <i class="fas fa-users text-primary"></i> 好友列表 (368)
                            </h5>
                            
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" placeholder="搜索好友...">
                                <button class="btn btn-primary">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                            
                            <div class="friends-list">
                                <!-- 好友1 -->
                                <div class="d-flex align-items-center justify-content-between mb-3 pb-3 border-bottom">
                                    <div class="d-flex align-items-center gap-3">
                                        <img src="https://picsum.photos/100/100?random=102" alt="林小雨的头像" class="author-avatar">
                                        <div>
                                            <div class="author-name">林小雨</div>
                                            <div class="text-sm text-secondary">25岁 · 北京 · 程序员</div>
                                        </div>
                                    </div>
                                    <button class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-comment"></i> 聊天
                                    </button>
                                </div>
                                
                                <!-- 好友2 -->
                                <div class="d-flex align-items-center justify-content-between mb-3 pb-3 border-bottom">
                                    <div class="d-flex align-items-center gap-3">
                                        <img src="https://picsum.photos/100/100?random=103" alt="王大山的头像" class="author-avatar">
                                        <div>
                                            <div class="author-name">王大山</div>
                                            <div class="text-sm text-secondary">32岁 · 广州 · 户外教练</div>
                                        </div>
                                    </div>
                                    <button class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-comment"></i> 聊天
                                    </button>
                                </div>
                                
                                <!-- 好友3 -->
                                <div class="d-flex align-items-center justify-content-between mb-3 pb-3 border-bottom">
                                    <div class="d-flex align-items-center gap-3">
                                        <img src="https://picsum.photos/100/100?random=104" alt="张悦的头像" class="author-avatar">
                                        <div>
                                            <div class="author-name">张悦</div>
                                            <div class="text-sm text-secondary">29岁 · 成都 · 音乐老师</div>
                                        </div>
                                    </div>
                                    <button class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-comment"></i> 聊天
                                    </button>
                                </div>
                                
                                <!-- 好友4 -->
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-center gap-3">
                                        <img src="https://picsum.photos/100/100?random=105" alt="刘思远的头像" class="author-avatar">
                                        <div>
                                            <div class="author-name">刘思远</div>
                                            <div class="text-sm text-secondary">35岁 · 杭州 · 美食博主</div>
                                        </div>
                                    </div>
                                    <button class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-comment"></i> 聊天
                                    </button>
                                </div>
                            </div>
                            
                            <!-- 查看更多好友 -->
                            <div class="text-center mt-4">
                                <button class="btn btn-outline-primary">
                                    <i class="fas fa-user-friends me-2"></i> 查看更多好友
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 侧边栏 -->
            <div class="sidebar">
                <!-- 个人详情 -->
                <div class="card">
                    <h5 class="card-title">
                        <i class="fas fa-info-circle text-primary"></i> 个人详情
                    </h5>
                    
                    <div class="detail-item">
                        <div class="detail-label">性别</div>
                        <div class="detail-value">男</div>
                    </div>
                    
                    <div class="detail-item">
                        <div class="detail-label">年龄</div>
                        <div class="detail-value">28岁</div>
                    </div>
                    
                    <div class="detail-item">
                        <div class="detail-label">所在地</div>
                        <div class="detail-value">上海 静安区</div>
                    </div>
                    
                    <div class="detail-item">
                        <div class="detail-label">职业</div>
                        <div class="detail-value">UI/UX设计师</div>
                    </div>
                    
                    <div class="detail-item">
                        <div class="detail-label">教育经历</div>
                        <div class="detail-value">上海美术学院 视觉传达设计</div>
                    </div>
                    
                    <div class="detail-item">
                        <div class="detail-label">交友目的</div>
                        <div class="detail-value">兴趣伙伴、摄影交流、旅行同伴</div>
                    </div>
                    
                    <div class="detail-item">
                        <div class="detail-label">最后活跃</div>
                        <div class="detail-value">今天 15:30</div>
                    </div>
                </div>
                
                <!-- 兴趣爱好 -->
                <div class="card">
                    <h5 class="card-title">
                        <i class="fas fa-heart text-primary"></i> 兴趣爱好
                    </h5>
                    
                    <div class="tags">
                        <span class="tag">摄影</span>
                        <span class="tag">旅行</span>
                        <span class="tag">艺术展览</span>
                        <span class="tag">电影</span>
                        <span class="tag">咖啡</span>
                        <span class="tag">骑行</span>
                        <span class="tag">阅读</span>
                        <span class="tag">设计</span>
                    </div>
                </div>
                
                <!-- 照片相册 -->
                <div class="card">
                    <h5 class="card-title">
                        <i class="fas fa-images text-primary"></i> 照片相册
                    </h5>
                    
                    <div class="photos-grid">
                        <div class="photo-item">
                            <img src="https://picsum.photos/300/300?random=31" alt="相册照片1">
                        </div>
                        <div class="photo-item">
                            <img src="https://picsum.photos/300/300?random=32" alt="相册照片2">
                        </div>
                        <div class="photo-item">
                            <img src="https://picsum.photos/300/300?random=33" alt="相册照片3">
                        </div>
                        <div class="photo-item">
                            <img src="https://picsum.photos/300/300?random=34" alt="相册照片4">
                        </div>
                        <div class="photo-item">
                            <img src="https://picsum.photos/300/300?random=35" alt="相册照片5">
                        </div>
                        <div class="photo-item">
                            <div class="photo-more">+24</div>
                        </div>
                    </div>
                    
                    <button class="btn btn-outline-primary w-100">
                        <i class="fas fa-images me-1"></i> 查看全部相册
                    </button>
                </div>
                
                <!-- 担保信息 -->
                <div class="card">
                    <h5 class="card-title">
                        <i class="fas fa-shield-alt text-primary"></i> 担保信息
                    </h5>
                    
                    <div class="detail-item">
                        <div class="detail-label">实名认证</div>
                        <div class="detail-value text-success"><i class="fas fa-check-circle"></i> 已认证</div>
                    </div>
                    
                    <div class="detail-item">
                        <div class="detail-label">身份审核</div>
                        <div class="detail-value text-success"><i class="fas fa-check-circle"></i> 已通过</div>
                    </div>
                    
                    <div class="detail-item">
                        <div class="detail-label">社交评价</div>
                        <div class="detail-value">
                            <div class="d-flex align-items-center">
                                <div class="text-warning me-2">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half-alt"></i>
                                </div>
                                <span>4.8 (126人评价)</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="detail-item">
                        <div class="detail-label">担保等级</div>
                        <div class="detail-value">
                            <span class="badge bg-primary">AAA级</span>
                        </div>
                    </div>
                    
                    <button class="btn btn-outline-primary w-100 mt-2">
                        <i class="fas fa-info-circle me-1"></i> 查看完整担保信息
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 关注按钮功能
            const likeBtn = document.getElementById('likeBtn');
            let isLiked = false;
            
            likeBtn.addEventListener('click', function() {
                isLiked = !isLiked;
                if (isLiked) {
                    this.classList.remove('btn-outline-primary');
                    this.classList.add('btn-primary');
                    this.innerHTML = '<i class="fas fa-heart"></i> 已关注 (257)';
                } else {
                    this.classList.remove('btn-primary');
                    this.classList.add('btn-outline-primary');
                    this.innerHTML = '<i class="fas fa-heart"></i> 关注 (256)';
                }
            });
            
            // 留言点赞功能
            const likeComment1 = document.getElementById('likeComment1');
            const likeComment2 = document.getElementById('likeComment2');
            const likeComment3 = document.getElementById('likeComment3');
            
            function setupLikeComment(commentEl) {
                let liked = false;
                let count = parseInt(commentEl.textContent.trim().split(' ')[1]);
                
                commentEl.addEventListener('click', function() {
                    liked = !liked;
                    if (liked) {
                        this.classList.add('liked');
                        this.innerHTML = `<i class="fas fa-heart"></i> ${count + 1}`;
                    } else {
                        this.classList.remove('liked');
                        this.innerHTML = `<i class="fas fa-heart"></i> ${count}`;
                    }
                });
            }
            
            setupLikeComment(likeComment1);
            setupLikeComment(likeComment2);
            setupLikeComment(likeComment3);
            
            // 回复按钮功能
            const replyBtns = document.querySelectorAll('.replyBtn');
            
            replyBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    // 隐藏所有回复表单
                    document.querySelectorAll('.reply-form').forEach(form => {
                        form.classList.add('d-none');
                    });
                    
                    // 显示当前回复按钮对应的回复表单
                    const commentItem = this.closest('.comment-item, .reply-item');
                    const replyForm = commentItem.querySelector('.reply-form');
                    
                    if (replyForm) {
                        replyForm.classList.remove('d-none');
                        replyForm.querySelector('input').focus();
                    }
                });
            });
            
            // 发送回复按钮功能
            const sendReplyBtns = document.querySelectorAll('.reply-form .btn');
            
            sendReplyBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const replyForm = this.closest('.reply-form');
                    const input = replyForm.querySelector('input');
                    const replyText = input.value.trim();
                    
                    if (replyText) {
                        // 在实际应用中，这里会发送回复到服务器
                        alert(`回复已发送: ${replyText}`);
                        input.value = '';
                        replyForm.classList.add('d-none');
                    }
                });
            });
            
            // 发送留言功能
            const sendCommentBtn = document.querySelector('.comment-form .btn');
            
            sendCommentBtn.addEventListener('click', function() {
                const textarea = document.querySelector('.comment-form textarea');
                const commentText = textarea.value.trim();
                
                if (commentText) {
                    // 在实际应用中，这里会发送留言到服务器
                    alert(`留言已发送: ${commentText}`);
                    textarea.value = '';
                }
            });
        });
    </script>
</body>
</html>
    

